<template>
  <el-tree
    ref="tree"
    v-bind="$attrs"
    :style="{ '--lightOpacity': lightTheme,width: treeWidth+'px' }"
    v-on="$listeners"
  >
    <span slot-scope="{ node, data }" class="slotStyle">
      <slot :node="node" :data="data">
        <div class="treeIconName">
          <span class="tree_label">{{ node.label }}</span>
        </div>
      </slot>
    </span>
  </el-tree>
</template>

<script>
export default {
  name: 'DtTree',
  props: {
    treeWidth: {
      // 树的宽度
      type: Number,
      default: 300
    },
    btnList: { // 可用于自定义按钮数据展示
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
    }
  },
  computed: {
    theme() {
      return this.$store.getters.theme
    },
    lightTheme() {
      return `${this.theme}19`
    }
  },
  watch: {
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data[this.defaultProps.label].indexOf(value) !== -1
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
